<script setup lang="ts">
import {Delete, Edit, InfoFilled, View, Hide} from "@element-plus/icons-vue";
import {onMounted, reactive, ref} from "vue";
import {deleteTutorialAPI, getTutorialAPI, getTutorialBodyAPI, addTutorialAPI} from "@/api/resource.ts";
import type {addTutorialData, tutorialData} from "@/type/resource.ts";
import {useBodyStore} from "@/store/body.ts";
import {ElMessage, ElNotification} from "element-plus";

const bodyStore = useBodyStore()
const dialogVisible = ref(false)
const tutorialList = ref<tutorialData[]>()
const searchBody = ref('')
const urlStr = ref('')
const descStr = ref('')
const switchOfGender = ref(true)
const ruleForm = reactive({
  name: '',
  gender: switchOfGender.value ? 0 : 1,
  bodyId: '',
  videoUrl: [],
  desc: []
})

// 获取教程列表
const getTutorial = async () => {
  const res = await getTutorialAPI()
  tutorialList.value = res.data
}

// 搜索部位教程
const onSearchBody = async () => {
  const res = await getTutorialBodyAPI(searchBody.value)
  tutorialList.value = res.data
}

// 重置
const restList = async () => {
  await getTutorial()
}

// 添加部位教程
const addTutorial = async () => {
  ruleForm.videoUrl = (urlStr.value.includes(',') ? urlStr.value.split(',') : [urlStr.value]) as any
  ruleForm.desc = (descStr.value.includes('。') ? descStr.value.split('。') : [descStr.value]) as any
  const res = await addTutorialAPI(ruleForm as addTutorialData)
  console.log(res)
  await getTutorial()
  dialogVisible.value = false
}


// 删除部位教程
const deleteTutorial = async (id) => {
  const res = await deleteTutorialAPI(id)
  if (res.code === 0) {
    await getTutorial()
    ElMessage({
      type: 'success',
      message: res.message
    })
  }
}

// 编辑课程
const EditTutorial = () => {
  ElNotification({
    title: 'Warning',
    message: '为减缓服务器压力，暂关闭编辑接口及数据回显',
    type: 'warning',
  })
}

onMounted(() => {
  getTutorial()
})
</script>

<template>
  <el-card class="box-card">
    <div class="card-tutorial-title">
      <div class="search-tutorial align_center row">
        <el-select v-model="searchBody" clearable placeholder="Select">
          <el-option
              v-for="item in bodyStore.bodyList"
              :key="item._id"
              :label="item.nickname"
              :value="item._id"
          />
        </el-select>
        <el-button type="primary" @click="onSearchBody" style="margin:0 10px">搜索</el-button>
        <el-button @click="restList">重置</el-button>
      </div>
      <el-button type="primary" @click="dialogVisible = true">添加教程</el-button>
    </div>
    <div class="card-tutorial-table">
      <el-table
          border
          class="el-table-box"
          ref="multipleTableRef"
          :data="tutorialList"
          style="width: 100%"
      >
        <el-table-column label="#" width="60" align="center" type="index"/>
        <el-table-column align="center" label="性别" width="60">
          <template #default="{row}">
            {{ row.gender === 0 ? '男' : '女' }}
          </template>
        </el-table-column>
        <el-table-column prop="name" align="center" label="名称"/>
        <el-table-column align="center" label="部位">
          <template #default="{row}">
            {{ row.bodyId.nickname }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="描述" width="200">
          <template #default="{row}">
            <div class="tutorial-desc">
              {{ row.desc[0] }}
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="控制" width="220">
          <template #default="{row}">
            <div class="operator-btn">
              <el-button type="primary" size="default" @click="EditTutorial" :icon="Edit as any" circle/>
              <el-popconfirm
                  width="200"
                  @confirm="deleteTutorial(row._id)"
                  confirm-button-text="确定"
                  cancel-button-text="取消"
                  :icon="InfoFilled as any"
                  icon-color="#f36b6c"
                  title="您确定删除此部位吗?"
              >
                <template #reference>
                  <el-button type="danger" size="default" :icon="Delete as any" circle/>
                </template>
              </el-popconfirm>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <Preview :visibleProp="viewerVisible" :imageLinkProp="currentImage" :onClose="closeImageViewer"/>
  </el-card>
  <el-dialog v-model="dialogVisible" title="添加部位">
    <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        status-icon
        :rules="rules"
        style="padding: 0 50px"
        class="demo-ruleForm"
    >
      <el-form-item label="名称" prop="name">
        <el-input v-model="ruleForm.name" type="text" autocomplete="off"/>
      </el-form-item>
      <div class="row" style="justify-content: space-between">
        <el-form-item label="性别" prop="gender">
          <el-switch
              style="--el-switch-off-color: #ea78fc"
              v-model="switchOfGender"
              :active-action-icon="View as any"
              :inactive-action-icon="Hide as any"
              active-text="男"
              inactive-text="女"
          />
        </el-form-item>
        <el-form-item label="部位">
          <el-select v-model="ruleForm.bodyId" clearable placeholder="Select">
            <el-option
                v-for="item in bodyStore.bodyList"
                :key="item._id"
                :label="item.nickname"
                :value="item._id"
            />
          </el-select>
        </el-form-item>
      </div>
      <el-form-item label="链接">
        <el-input v-model.lazy="urlStr" type="text" placeholder="若为多个视频链接，请用,分隔" autocomplete="off"/>
      </el-form-item>
      <el-form-item label="描述">
        <el-input v-model.lazy="descStr" type="text" autocomplete="off" placeholder="请用。分隔段落"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="addTutorial">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style scoped lang="scss">
.box-card {
  padding: 0 50px;

  .card-tutorial-title {
    height: 35px;
    display: flex;
    justify-content: space-between;
  }

  .card-tutorial-table {
    margin-top: 20px;

    .el-table-box {
      height: calc(90vh - 140px);
    }

    .tutorial-desc {
      display: -webkit-box; /*弹性伸缩盒子*/
      -webkit-box-orient: vertical; /*垂直排列*/
      line-height: 20px;
      -webkit-line-clamp: 1;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}
</style>